<template>
	<view>
		<view class="ding">
			<view class="dingbox">
				<view class="ding1 xuan">{{$t('historyzd.buy')}}</view>
				<view class="ding1">充值记录</view>
			</view>
			<!-- <picker class="ding1" style="font-size: 14px; font-weight: normal;" mode="date" start="2022-01-01"
				end="2024-01-01" fields="month" @change="bindDateChange">
				<view>{{anyDate}}</view>
			</picker> -->
		</view>
		<view class="wu" v-show="wuflag">
			<view >
				{{$t('historyzd.jilv')}}
			</view>
		</view>
		<view class="xia">
			<view class="box_2" v-for="(item,i) in list" :key="i">
				<view class="box2_22">
					<view class="box2_zi">{{item.type==2?$t('historyzd.wifi'):$t('historyzd.package')}}</view>
					<view class="box2_zi2">{{item.createTime}}</view>
				</view>
				<view class="box3">{{item.message}}</view>
				<!-- <view>{{item.desc2}}</view> -->
				<view :class="item.status==1?'statust':'statusf'">{{$t('historyzd.status')}}：{{item.status==1?$t('historyzd.sucess'):$t('historyzd.fail')}}</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
			import { getResponseData, showToastTip,getBaseUrl,getWsUrl} from "@/api/req.js";
	export default {
		data() {
			return {
				timeIndex: 0,
				wuflag:false,
				pageIndex: 1,
				anyDate: '全部时间>',
				list: [
				// 	{
				// 	name: "买wifi Hotspot",
				// 	buytime: "2023-08-08 08:42",
				// 	desc: "买WiFi 1000基普",
				// 	desc2: "对于10小时 使用期限30日",
				// 	status: 0
				// }, {
				// 	name: "买wifi Hotspot",
				// 	buytime: "2023-08-08 08:42",
				// 	desc: "买WiFi 1000基普",
				// 	desc2: "对于10小时 使用期限30日",
				// 	status: 1
				// }
				]

			}
		},
		onLoad() {
			this.gethistory();
		},
		onReachBottom() {
			console.log("上拉加载更多")
			this.pageIndex++;
			this.gethistory();
			//模拟数据请求
			// setTimeout(() => {
			// 		this.cardlist.push(...this.cardlist,...this.cardlist);
			// }, 2000)
		},
		methods: {
			// bindDateChange(e) {
			// 	console.log(e)
			// 	this.anyDate = e.detail.value
			// 	this.timeIndex = 4
			// },
			// changeTime(index) {
			// 	this.timeIndex = index
			// 	this.anyDate = '自定义日期'
			// },
			gethistory() {
				var that = this;
				// 得到用户数据
				getResponseData("/banner/queryBusinessHistory", 'get', {
					limit: 10,
					page: this.pageIndex
				}, function(res) {
						console.log(res);
					if (res.code == 200) {
						if(res.data.list<0){
							that.wuflag=true;
							return;
						}
						that.list.push(...res.data);
					} else {
						
					}
				});
			}


		}
	}
</script>

<style>
	page {
		background-color: ghostwhite;
	}
	.wu{
		display: flex;
		justify-content: space-around;
	}

	.ding {
		display: flex;
		justify-content: space-around;
		height: 30px;
		margin: 20px 10px;
	}

	.dingbox {
		display: flex;
	}

	.xuan {
		color: #014099 !important;
		font-weight: 600;
	}

	.dingbox>view {
		line-height: 30px;
	}

	.ding1 {
		padding: 0px 10px;
		line-height: 30px;
		border-radius: 15px;
		font-size: 18px;
		/* 	font-weight: 600; */
	}

	.xia {
		background-color: #1eb9ee;
		border-radius: 15px;
		padding-bottom: 20px;
		padding-top: 10px;
		/* border: 1px solid black; */
	}



	.box_2 {
		padding: 10px;
		margin: 15px 10px 0;
		background-color: white;
		color: grey;
		border-radius: 5px;
	}

	.box2_22 {
		display: flex;
		justify-content: space-between;
	}


	.box_2>view {
		line-height: 30px;
		color: black;
	}

	.box2_zi {
		font-size: 16px;
		color: #016fb6;
		font-weight: 600;
	}

	.box2_zi2 {
		font-size: 14px;
		color: gray;
	}
	
	.box3{
		width: 80%;
	}

	.statust {
		color: green !important;
	}

	.statusf {
		color: red !important;
	}
</style>